<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>App</title>
<link href='http://fonts.googleapis.com/css?family=Molengo'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alice'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet'
	type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Federo'
	rel='stylesheet' type='text/css'>

<link href="modeling.css" rel="stylesheet" type="text/css">

<link href="global.css" rel="stylesheet" type="text/css">

<link href="template2.css" rel="stylesheet" type="text/css"><!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<style type="text/css">
</style>
</head>

<body>
<div class="global">
<div id=top2></div>
<div class="header">
<div class="bgimg"></div>
<div class="bgpart1"></div>
<div class="bgpart2"></div>

<div class="banner">
<div class="logo"><img
	src="http://2011.igem.org/wiki/images/c/c9/Logo.png" width="200"
	height="200" /></div>
<div class="title"><img
	src="http://ung.igem.org/wiki/images/b/b3/Title.png" width="603"
	height="220" /></div>
<div class="igemlogo"><a target="_blank"
	href="http://2011.igem.org"><img
	src="http://2011.igem.org/wiki/images/e/e2/Igemlogo.png" width="180"
	height="150" /></a></div>
</div>
<!--banner-->
<div class="nav">
<ul id="topnav">
	<li><a id="P_Home" href="http://zjuchina.tk/index.html">Home</a></li>

	<li><a id="P_Project"
		href="http://zjuchina.tk/Project.html">Project</a> <!--Subnav Starts Here-->


	<!--Subnav Ends Here--></li>
	<li><a id="P_Team" href="http://zjuchina.tk/Team.html">Team</a>

	</li>
	<li><a id="P_Notebook"
		href="http://zjuchina.tk/Notebook.html">Notebook</a></li>
	<li><a id="P_HumanPractice"
		href="http://zjuchina.tk/Humanpractice.html">HumanPractice</a>
	</li>
	<li id="search">
	<div id="searchbar">

	<div>
	<form action="http://www.google.com.hk/cse" id="cse-search-box"
		target="_blank">
	<div><input type="hidden" name="cx"
		value="005438704919531788579:zbfi5n-q5du" /> <input type="hidden"
		name="cof" value="FORID:10" /> <input type="hidden" name="ie"
		value="UTF-8" /> <input type="text" name="q" size="15" /> <input
		type="submit" name="sa" value="Search" /></div>
	</form>
	<script type="text/javascript"
		src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script></div>
	</div>
	</li>
</ul>
</div>
<!--navbar--> <script type="text/javascript">
   document.getElementById('P_Team').onclick=function(){
	   document.getElementById('P_Te').style.display='block'

	    document.getElementById('P_Pr').style.display='none'
		document.getElementById('P_No').style.display='none'
		document.getElementById('P_Hu').style.display='none'
		<!-- document.getElementById('P_Pr').style.display='none' -->
	   };
	    document.getElementById('P_Project').onclick=function(){
	   document.getElementById('P_Pr').style.display='block'
	    document.getElementById('P_Te').style.display='none'
		document.getElementById('P_No').style.display='none'
		document.getElementById('P_Hu').style.display='none'
		<!-- document.getElementById('P_Pr').style.display='none' -->
	   };
	    document.getElementById('P_Notebook').onclick=function(){
	   document.getElementById('P_No').style.display='block'
	    document.getElementById('P_Pr').style.display='none'
		document.getElementById('P_Te').style.display='none'
		document.getElementById('P_Hu').style.display='none'
		<!-- document.getElementById('P_Pr').style.display='none' -->
	   };
	    document.getElementById('P_HumanPractice').onclick=function(){
	   document.getElementById('P_Hu').style.display='block'
	    document.getElementById('P_Pr').style.display='none'
		document.getElementById('P_No').style.display='none'
		document.getElementById('P_Te').style.display='none'
		<!-- document.getElementById('P_Pr').style.display='none' -->
	   };
	  
</script></div>
<!--header-->
<div id="contentwrapper">

<div class="main">
<div class="bgpart3"></div>

<div class="leftulcontainer" id="purple">
<div id="leftul" class="leftul">
<div id="accordion">

<h4>Overview</h4>

<div class="pane" style="height: auto"><a
	href="http://zjuchina.tk/Humanpractice.html">Overview</a></div>
<h4>Safety</h4>

<div class="pane" style="height: auto"><a
	href="http://zjuchina.tk/Safety.html">Safety<br />
</a></div>
<h4 class="curent">Originality</h4>

<div class="pane" style="display: block; height: auto"><a
	href="http://zjuchina.tk/App.html">iPhone App<br />
</a> <a href="http://zjuchina.tk/Novel.html">Novel<br />
</a></div>
<h4 style="font-size: 20px;">Funding Guide</h4>

<div class="pane" style="height: auto"><a
	href="http://zjuchina.tk/Fundingreport.html">Funding Report</a>
<a href="http://zjuchina.tk/Assessment.html">Assessment<br />
</a> <a href="http://zjuchina.tk/Manual.html">Manual<br />
</a></div>
<h4><a href="http://zjuchina.tk/SBC.html">SBC</a></h4>

<div class="pane" style="height: auto"><a
	href="http://zjuchina.tk/SBC.html">SBC<br />
</a></div>

<script> 
$(function() { 
 
$("#accordion").tabs("#accordion div.pane", {tabs: 'h4', effect: 'slide', initialIndex: null});
});
</script> <!-- Navigation scroll follow --> <script type="text/javascript">
        $(window).scroll(function () { 
            var scrollPos = $(window).scrollTop();
            if (scrollPos > 330) {
                $(".leftul").addClass("stickToTop");
            } else {
                $(".leftul").removeClass("stickToTop");
            }
     
        });
    </script></div>
<!--accordion--></div>
<!--leftul--></div>
<!--leftulcontainer-->

<div class="rightcontainer">
<div id="styleA" class="frame">
<div id="purple">
<p></p>
<h1>App</h1>
<!--importantcontainer-->

<div id="framecontent">

<div id="page1">
<div class="block" id="safety1">
<div id="importantcontainer">
<div class="frame" id="important">
<div class="bgcolors" id="round">
<h1>Let's talk about IOS</h1>
</div>
</div>
</div>

<p>Since iPhone is more and more popular, the IOS, an OS which
iPhone, iTouch and iPad running on, is becoming a large world for
massive users. With the idea of promoting iGEM in a new way, we've
developed a game on IOS. Throughout the exiting adventure, the game will
introduce some basic knowledge of Synthetic biology. People can easily
get a preliminary understanding of them, and have fun!</p>
<p><img src="iPhone.jpg" width="600" height="400" alt="iphone" /></p>
</div>
<div class="block" id="safety2">
<div id="importantcontainer">
<div class="frame" id="important">
<div class="bgcolors" id="round">
<h1>How to play</h1>
</div>
</div>
</div>

<p>The rule is easy: You need to scratch promoter and coding
sequence into the reator, Match all the parts in the route in limited
time, or you will lose!</p>
<table width="300" border="1" style="margin: auto; text-align: center">
	<tr>
		<td><img src="level_4.png" width="442" height="321"
			alt="screenshot" /></td>
	</tr>
</table>
<p>&nbsp;</p>
</div>
<div class="block" id="safety3">
<div id="importantcontainer">
<div class="frame" id="important">
<div class="bgcolors" id="round">
<h1>Features</h1>
</div>
</div>
</div>

<p>Play: Another way to understand synthetic biology</p>
<p>Highscore: Record of best plays</p>
<p>Help Menu: A guide for new players</p>
<table width="300" border="1" style="margin: auto; text-align: center">
	<tr>
		<td><img src="app.png" width="340" height="323" alt="ap" /></td>
	</tr>
</table>
<p>&nbsp;</p>
</div>
<div class="block" id="safety1">
<div id="importantcontainer">
<div class="frame" id="important">
<div class="bgcolors" id="round">
<h1>Get to know iGEM on IOS devices</h1>
</div>
</div>
</div>

<table width="500" height="500" border="0" style="margin: auto">
	<tr>
		<td width="240"><img src="untitled.jpg" alt="intro1" width="240"
			height="240" /></td>
		<td width="240"><img src="intro2.jpg" alt="intro2" width="240"
			height="240" /></td>
	</tr>
	<tr>
		<td><img src="intro3.jpg" alt="intro3" width="240" height="240" /></td>
		<td><img src="intro4.jpg" alt="intro4" width="240" height="240" /></td>
	</tr>
</table>
</div>
<div class="block" id="safety1">
<div id="importantcontainer">
<div class="frame" id="important">
<div class="bgcolors" id="round">
<h1>Download</h1>
</div>
</div>
</div>

<p><a><strong>Click Here To Download</strong></a></p>
</div>
</div>
<script type="text/javascript"> 
document.getElementById('bb').onclick= function(){
document.getElementById('page2').style.display='none'
 document.getElementById('page1').style.display='block'}
 
document.getElementById('bf').onclick= function(){
	
document.getElementById('page1').style.display='none'
 document.getElementById('pgae2').style.display='block'}
</script>
<p style="clear: both"></p>
</div>
<!--framecontent-->

<div style="display: none" class="frame" id="rightnav">
<div class="bgcolors" id="round">
<p><a name="jumptop" id="bb">&nbsp; Biobrick Group&nbsp;</a>|<a
	id="bf">&nbsp;Biofilm Group &nbsp;</a></p>
</div>
<!--bgcolors--></div>
<!--rightnav--></div>
<!--blue-->
<div class="links"><a href="#top2">Top</a></div>
</div>
<!--frame--></div>
<!--rightcontainer-->
<p style="clear: both"></p>

</div>
<!--main-->
<div class="footer" id="footer"><a href="http://2011.igem.org/">
iGem 2011 Home Page</a> <a href="http://ung.igem.org/Special:Upload/">
Upload Files</a> <a
	href="http://2011.igem.org/wiki/index.php?title=Template:Zjucss_main&action=edit">Edit
CSS</a> <a href="http://ung.igem.org/Team_Wikis?year=2011"> Team Wikis</a> <a
	href="mailto:zjuigem@gmail.com?"><strong>Contact Us</strong></a></div>
</div>
<!--contentwrapper--></div>
</body>
</html>
